window.addEventListener('load', function () {
    document.body.classList.add('loaded');
    // 初始化时禁用搜索按钮
    const searchButton = document.getElementById('searchButton');
    searchButton.disabled = true;
});

window.onscroll = function () {
    scrollFunction();
    // 去除在滚动事件中添加 loaded 类
};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("back-to-top").style.display = "block";
    } else {
        document.getElementById("back-to-top").style.display = "none";
    }
}

document.getElementById('back-to-top').addEventListener('click', function () {
    // 使用平滑滚动行为
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
    // 去除在点击事件中添加 loaded 类
});

let isFirstSearch = true; // 标志变量，用于判断是否是第一次搜索

function searchProducts() {
    const queryInput = document.getElementById('searchQuery');
    const query = queryInput.value.trim(); // 去除前后空格

    // 如果搜索框为空，提示用户输入商品名称
    if (!query) {
        queryInput.placeholder = '请输入商品名称后再搜索';
        return;
    }

    // 清除 products div 的内容
    const productsDiv = document.getElementById('products');
    productsDiv.innerHTML = '';

    // 显示加载中的图片
    const loadingImg = document.createElement('img');
    loadingImg.src = '../img/loding.gif';
    loadingImg.id = 'loading-img';
    productsDiv.appendChild(loadingImg);

    if (isFirstSearch) {
        if (query) {
            fetch(port + 'shopping', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ query })
            })
                .then(response => response.json())
                .then(data => {
                    // 数据加载完成后隐藏加载中的图片
                    document.getElementById('loading-img').remove();
                    console.log(data);
                    productsDiv.innerHTML = data.module.map(product => `
                    <div class="product">
                        <img src="${product.img}" alt="${product.title}">
                        <div class="product-info">
                            <h4>${product.title}</h4>
                            <p>暂无价格，请前往苏宁商城观看</p>
                            <p>购物评价:${product.pinjia}</p>
                            <p><a href="${product.link}">商品链接</a></p>
                            <span>此链接由苏宁提供</span>
                        </div>
                    </div>
                `).join('');
                })
                .catch(error => {
                    console.error('Error:', error);
                    // 数据加载失败时隐藏加载中的图片
                    document.getElementById('loading-img').remove();
                });
        }
        isFirstSearch = false; // 切换标志变量状态
    } else {
        queryInput.value = '';
        // 隐藏加载中的图片
        document.getElementById('loading-img').remove();
        isFirstSearch = true; // 切换标志变量状态
    }
}

// 为所有带有 Hot-search 类的 ul 下的 li 元素添加点击事件监听器
document.querySelectorAll('ul.Hot-search li').forEach(li => {
    li.addEventListener('click', function () {
        const queryInput = document.getElementById('searchQuery');
        queryInput.value = li.textContent.trim(); // 将 li 的文本内容传递到搜索框
        queryInput.placeholder = ''; // 清除占位符
        searchProducts(); // 触发搜索功能
    });
});

// 监听搜索框的输入事件，根据输入内容启用或禁用搜索按钮
document.getElementById('searchQuery').addEventListener('input', function () {
    const searchButton = document.getElementById('searchButton');
    if (this.value.trim()) {
        searchButton.disabled = false;
    } else {
        searchButton.disabled = true;
        this.placeholder = '请输入商品名称后再搜索';
    }
});
